<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('范围选择')}`">{{ $t('范围选择') }}</t>
            <li>
                配置<span class="s-code">range</span>属性以激活范围选择模式，该属性的绑定值是一个数组，由最小边界值和最大边界值组成
            </li>
            <li>
                设置<span class="s-code">marks</span>属性可以在滑块上显示标记
            </li>
        </template>
        <div style="color:#666;">
            <p>v-model 绑定值：{{ value }}</p>
        </div>
        <div style="width:460px;">
            <sib-item v-model="value" :props="props"></sib-item>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref([10, 50]);
        const props = reactive({
            type: 'slider',
            range: true,
            marks: {
                0: '起点',
                50: {
                    style: {
                        color: '#1989FA',
                    },
                    label: '50%',
                },
                100: '终点',
            },
        });

        return {
            props,
            value,
            templateString: `<template>
    <p>v-model 绑定值：{{ value }}</p>
    <sib-item v-model="value" :props="props"></sib-item>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref([10, 50]);
        const props = reactive({
            type: 'slider',
            range: true,
            marks: {
                0: '起点',
                50: {
                    style: {
                        color: '#1989FA',
                    },
                    label: '50%',
                },
                100: '终点',
            },
        });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
